<template>
  <div class="p-40px w-378px bg-white rounded-8px h-full">
    <p class="text-18px">照片</p>
    <div class="mt-18px w-auto">
      <div class="flex flex-wrap justify-between items-center">
        <div
          class="w-140px h-140px rounded-8px overflow-hidden img-content mb-10px"
          v-for="(img, index) in imageListWithArray"
          :key="index"
        >
          <img :src="img" alt="" class="w-full h-full object-cover" />
        </div>
        <Upload @success="handleSuccess">
          <div class="flex justify-center items-center w-140px h-140px rounded-8px bg-[#f7f8fa]">
            <div class="arco-upload-picture-card-text">
              <IconPlus />
            </div>
          </div>
        </Upload>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import Upload from '@/components/upload/index.vue'
import { IconPlus } from '@arco-design/web-vue/es/icon'
import { useVModel } from '@vueuse/core'
const props = defineProps(['images'])
const emits = defineEmits(['update:images'])
const imageList = useVModel(props, 'images', emits)
const imageListWithArray = computed({
  get() {
    if (imageList.value) {
      return imageList.value.split(',')
    } else {
      return []
    }
  },
  set(val) {
    console.log(val)
    imageList.value = val.join(',')
  }
})

const handleSuccess = (url) => {
  imageListWithArray.value = [...imageListWithArray.value, url]
}
</script>
<style lang="less" scoped>
.img-content {
  // box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #eee;
}
</style>
